<template>
  <div>
    <Progress
      v-if="show"
      :percent="percent"
      size="small"
      :format="percentFn"
      :status="statusProgress"
      class="progress"
    />
    <span v-if="status === 'error'" style="color: #ff0000; text-align: center; line-height: 4"
      >上传错误</span
    ></div
  >
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, nextTick, watch } from 'vue';
  import { Progress } from 'ant-design-vue';
  import { StatusText, ProgressType } from '../props';

  const props = defineProps({
    status: {
      type: String as PropType<StatusText>,
      default: null,
    },
  });

  let timer;

  const statusProgress = computed(() => {
    let text: ProgressType = undefined;
    switch (props.status) {
      case 'uploading':
        text = 'active';
        break;
      case 'done':
        text = 'success';
        break;
      case 'error':
        text = 'exception';
        break;
    }
    return text;
  });

  const show = ref(true);

  const percent = ref<number>(0);

  const percentFn = (percent) => {
    return `${percent}%`;
  };

  watch(
    () => props.status,
    (v) => {
      console.log(`v--------------------`, v);
      switch (v) {
        case 'uploading':
          nextTick(() => {
            timer = setInterval(() => {
              if (percent.value < 99) {
                percent.value += 1;
              } else {
                clearInterval(timer);
              }
            }, 20);
          });
          break;
        case 'done':
          clearInterval(timer);
          percent.value = 100;
          const timeout = setTimeout(() => {
            show.value = false;
            clearTimeout(timeout);
          });
          break;
        default:
          show.value = false;
          clearInterval(timer);
      }
    },
    { immediate: true },
  );

  onMounted(() => {});
</script>

<style lang="less" scoped>
  .progress {
    font-size: 10px;
    text-align: center;
    color: #d6d6d6;
    line-height: 2;

    &:deep(.ant-progress-outer) {
      width: 100%;
      margin: 0;
      padding: 0;
    }

    &:deep(.ant-progress-text) {
      margin: 0;
    }
  }
</style>
